/**
* @description:  通信机房出入工单 --> 待审批详情、审批拒绝详情、待执行详情、已完成详情、已撤销详情
* @author: zhangxia
* @date:
**/
<template>
  <view class="task-monitor-main">
    <nav-bar class="header" back :title="formData.auditStatusName" @goBack="goBack"/>
    <!-- banner -->
    <view class="top-banner">
      <view class="left-banner">
        <text class="left-banner-title">{{formData.updateName}}发起的通信机房出入工单</text>
        <text class="left-banner-time">{{formData.updateTime}}</text>
      </view>
      <view :class="stateColor">{{formData.auditStatusName}}</view>
    </view>
    <!-- main   -->
    <main :class="{'mainHeight':formData.auditStatusName === '待执行' || formData.auditStatusName === '已完成' || controlBtn === ''}">
		<van-form>
			<view class="commonbj">
				<van-field input-align="right" v-model="formData.mantleName" label="作业负责人" readonly required/>
				<van-field input-align="right" v-model="formData.guardianName" label="作业监护人" readonly required/>
			</view>
			<div class="commontitle isrequired">
				操作人员
			</div>
			<view class="commonbj">
				<van-field input-align="right" v-model="formData.memberName" label="班组成员" readonly />
				<van-field input-align="right" label="其他单位成员" readonly />
			</view>
			<van-collapse v-model="activeNames">
			 <view class="commonbj"  v-for="(item,key) in operatorList" :key="key">
			 	<van-collapse-item :name="item.name" right-icon="cross" @click-right-icon="">
			 		<template #title>
			 		  <view class="custom-title">
			 		    <!-- <img src="../../../static/img/delete.png" alt="" @click="removeType(key, item.name,'operator')"> -->
			 		    {{ item.type }}
			 		  </view>
			 		</template>
			 		  <van-field input-align="right" v-model="item.userName" label="姓名" readonly  />
			 		  <van-field input-align="right" v-model="item.unitName" label="单位名称" readonly />
			 		  <van-field input-align="right" v-model="item.phone" label="联系方式" readonly />
			 		  <van-field input-align="right" v-model="item.idNumber" label="身份证号" readonly />
			 	</van-collapse-item>
			 </view>
			</van-collapse>
			<div class="commontitle isrequired">
				工作情况
			</div>
			<van-collapse v-model="jobActiveNames">
			  <view class="commonbj"  v-for="(item,key) in jobList" :key="key">
			  	<van-collapse-item :name="item.name">
			  		<template #title>
			  		  <view class="custom-title">
			  		    {{ item.type }}
			  		  </view>
			  		</template>
			  		工作内容
			  		<van-field input-align="left"
			  		v-model="item.workContent"
			  		rows="1"
					readonly
			  		autosize
			  		type="textarea"
			  		/>
            <van-field input-align="right" v-model="item.planIntoTime" label="计划进入时间"   readonly />
            <van-field input-align="right" v-model="item.planLeaveTime" label="计划结束时间"   readonly />
            <van-field input-align="right" v-model="item.floorName" label="工作楼层"     readonly />
            <van-field input-align="right" v-model="item.motorRoomName" label="机房编号"     readonly/>
            <van-field input-align="right" v-model="item.screenPosition" label="工作屏位" clearable  readonly/>
            <van-field input-align="right" v-model="item.deviceName" label="设备名称" clearable   readonly/>
			  	</van-collapse-item>

			  </view>
			</van-collapse>

<!--			<div class="commontitle isrequired">-->
<!--				位置情况-->
<!--			</div>-->
<!--			<van-collapse v-model="posActiveNames">-->
<!--			  <view class="commonbj"  v-for="(item,key) in posList" :key="key">-->

<!--			  	<van-collapse-item  :name="item.name">-->
<!--			  		<template #title>-->
<!--			  		  <view class="custom-title">-->
<!--			  		    &lt;!&ndash; <img src="../../../static/img/delete.png" alt="" @click="removeType(key, item.name,'pos')"> &ndash;&gt;-->
<!--			  		    {{ item.type }}-->
<!--			  		  </view>-->
<!--			  		</template>-->

<!--			  	</van-collapse-item>-->
<!--			  </view>-->
<!--			</van-collapse>-->
			<view class="commonbj">
				<van-field input-align="left"  label="备注" readonly />
				<van-field input-align="left"
				  v-model="formData.remarks"
				  rows="1"
				  autosize
          readonly
				  type="textarea"
				  placeholder="备注信息"
				/>
			</view>
			<div class="commontitle">
				审批进度
			</div>
			<view class="approval-info-container">
			  <van-steps direction="vertical"
			 :active="approvalActive"
			 active-color="#417adc"
			 inactive-color="#417adc"
			 active-icon="circle"
			 inactive-icon="circle">
					<van-step v-for="(item,key) in setpList" :key="key">
						<p><span v-if="item.currentNodeTime">{{ item.currentNodeTime }}</span><span style="color: #417ADC">{{item.currentNodeName}}</span></p>
						<p>
							<span>{{item.currentStatusName}}：{{ item.currentUserName }}</span>
						</p>
						<p class="opinion" v-if="item.currentNodeContent">
							<span>审批意见：</span>
							<span>{{ item.currentNodeContent }}</span>
						</p>
            <p class="opinion" v-if="item.realityIntoTime">
              <span>实际进入时间：</span>
              <span>{{ item.realityIntoTime }}</span>
            </p>
            <p class="opinion" v-if="item.realityLeaveTime">
              <span>实际离开时间：</span>
              <span>{{ item.realityLeaveTime }}</span>
            </p>
					</van-step>
			  </van-steps>
			</view>
		</van-form>
    </main>
   <footer v-if="showBtn">
      <van-button block @click="submit">{{ buttonText }}</van-button>
    </footer>
  </view>
</template>
<script>
import navBar from "../../../components/common/nav-bar";
import plateTitle from '../common/plateTitle.vue'
import moment from 'moment'
import {mapGetters} from "vuex";
import { Dialog } from 'vant';
export default {
  name: 'detailsPendingApproval',
  components: { navBar,plateTitle},
  props: {},
  data() {
    return {
      formData:{
        updateName:'', // 创建人名称
        updateTime:'',//当前操作人时间
        auditStatusName:'',// 当前状态
        mantleName:'',// 作业负责人
        guardianName:'',// 作业监护人
        memberName:'',// 班组成员
        remarks:''
      },
      backstageId:'',
      detailId:'',// 详情传参
      activeNames:["0"],
      posActiveNames:["0"],
      jobActiveNames:["0"],
      operatorList:[],
      // posList:[],
      jobList:[],
      showBtn:false,
		  setpList:[],
		  stateCode:'3',
      approvalActive: 0,
      againId:'',// 再次提交id
	  prevPage:""
    };
  },
  onLoad(options){
    this.backstageId = options.userId;
	this.prevPage = options.pagetype;
	switch(options.state){
		case "0":this.formData.auditStatusName = "待审批";break;
		case "1":this.formData.auditStatusName = "审批拒绝";break;
		case "2":this.formData.auditStatusName = "待执行";break;
		case "3":this.formData.auditStatusName = "已完成";break;
		case "4":this.formData.auditStatusName = "已撤销";break;
	}
  this.detailId = options.id;
	this.stateCode = options.state;
  this.selectRoomOneD() //获取详情
  },
  computed: {
    ...mapGetters(['userData']),
    stateColor() {
      if(this.stateCode === '0') {
        return 'left-state-dsp'
      }else if(this.stateCode === '1') {
        return 'left-state-jj'
      }else if(this.stateCode === '2') {
        return 'left-state-dzx'
      }else if(this.stateCode === '3') {
        return 'left-state-ywc'
      }else {
        return 'left-state-ycx'
      }
    },
    // 判断样式 及 按钮是否显示
    controlBtn() {
      if(this.userData.USERID === this.backstageId && this.prevPage === 'initial') {
        this.showBtn = true
        return '待审批'
      }else{
        this.showBtn = false
        return ''
      }
    },
    // 判断按钮
    buttonText() {
      if(this.formData.auditStatusName === '待审批') {
        return '撤销'
      }else if(this.formData.auditStatusName === '已撤销' || this.formData.auditStatusName === '审批拒绝') {
        return '再次提交'
      }
    },
    //判断待审批是否为本人操作
  },
  watch: {},
  methods: {
    // 获取详情
    selectRoomOneD() {
      let params = {
        machineId: this.detailId
      }
      this.$api.selectRoomOne(params).then(res => {
        this.againId = res.data.machineId
        this.formData = res.data
        this.formData.updateTime = moment(this.formData.updateTime).format('YYYY-MM-DD HH:mm')
        this.operatorList = res.data.otherPersonnelVo.map(item => {
          this.activeNames.push(item.name)
          return {...item}
        })
        // this.posList = res.data.locationVo.map(item => {
        //   this.posActiveNames.push(item.name)
        //   return {...item}
        // })
        this.jobList = res.data.workSituationVo.map(item => {
          item.planIntoTime = moment(item.planIntoTime).format('YYYY-MM-DD HH:mm')
          item.planLeaveTime = moment(item.planLeaveTime).format('YYYY-MM-DD HH:mm')
          this.jobActiveNames.push(item.name)
          return {...item}
        })
        this.setpList = res.data.approvalVo.map(item => {
          item.currentNodeTime = item.currentNodeTime ? moment(item.currentNodeTime).format('YYYY-MM-DD HH:mm'):''
          item.realityIntoTime = item.realityIntoTime ? moment(item.realityIntoTime).format('YYYY-MM-DD HH:mm'):''
          item.realityLeaveTime = item.realityLeaveTime ? moment(item.realityLeaveTime).format('YYYY-MM-DD HH:mm'):''
          return {...item}
        })
        this.approvalActive = res.data.currNode
      })
    },
    // 撤销
    submit() {
      if(this.buttonText === '撤销'){
        Dialog.confirm({
          message:'是否确认撤销'
        }).then(()=> {
          let params = {
            updateUid: this.userData.USERID,
            updateName: this.userData.SUERNAME,
            machineId: this.detailId
          }
          this.$api.cancel(params).then(res => {
            if(res.code == 0) {
              uni.navigateTo({
                url: `/pages/operationApprove/index/index`
              })
            }
          })
        })
      }else{
        // 审批拒绝 再次提交
        Dialog.confirm({
          message:'是否确认再次提交'
        }).then(()=> {
          uni.navigateTo({
            url: `/pages/operationApprove/communicationApproval/initiateApplication?typeName=${'again'}&againId=${this.againId}`
          })
        })
      }
    },
    // 返回
    goBack() {
      // uni.navigateTo({
      //   url: '/pages/operationApprove/communicationApproval/communicationApproval'
      // })
	  uni.navigateBack()
    },
  }
};
</script>
<style scoped lang="scss">
.task-monitor-main {
  min-height: 100vh;
  background: #F2F6FA;
  .top-banner {
    width: px2vw(1080);
    height: px2vh(190);
    background: #fff;
    margin-bottom: px2vw(30);
    .left-banner {
      width: px2vw(600);
      margin-top: px2vh(47);
      height: px2vh(98);
      float: left;
      margin-left: px2vh(50);
      .left-banner-title {
        display: block;
        font-size: px2vw(42);
        color: #417ADC;
      }
      .left-banner-time {
        font-size: px2vw(36);
        color: #666;
      }

    }
    .left-state-dsp,
    .left-state-ywc,
    .left-state-jj,
	.left-state-dzx,
	.left-state-ycx{
      width: px2vw(220);
      height: px2vh(80);
      margin-right: px2vh(30);
      margin-top: px2vh(55);
      float: right;
      font-size: px2vw(42);
      font-weight: 700;
      border-radius: px2vw(40);
      text-align: center;
      line-height: px2vh(80);
    }
    .left-state-ywc {
      color: #3CDA68;
      background: rgba(60,218,104,.1);
    }
    .left-state-dsp {
      color: #FFAD0E;
      background: rgba(255,173,14,.1);
    }
    .left-state-jj {
      color: #FF7070;
      background: rgba(255,112,112,.1);
    }
	.left-state-dzx {
	  color: #417ADC;
	  background: rgba(65,122,220,.1);
	}
	.left-state-ycx {
	  color: #8C8C8C;
	  background: rgba(140,140,140,.1);
	}
  }
  .plate-title {
    margin-left:px2vw(30);
    margin-bottom: px2vh(30);
  }
  main {
    width: calc(100% - #{px2vw(60)});
    margin:auto;
    height: calc(100vh - #{px2vh(590)});
    overflow-x: auto;
    .commonbj{
      background-color: #fff;
      margin-bottom: px2vh(30);
      .custom-title {
        display: flex;
        align-items: center;

        img {
          width: px2vh(42);
          margin-right: px2vw(29);
        }
      }
    }
    .commontitle{
      font-size: px2vh(40);
      color: #666666;
      font-weight: bold;
      margin-top: px2vh(60);
      margin-bottom: px2vh(27);
    }
    .isrequired::before{
      content: "*";
      color: #FF4355;
      display: inline-block;

    }
    .approval-info-container {
      border-radius: $border-radius-base;
      overflow: hidden;
      background-color: #FFFFFF;

      /deep/ .van-cell__title {
        color: #666;
      }

      /deep/ .van-cell__value {
        color: #333;
      }
    }
    .approval-info-container {
      .van-steps {
        .van-step.van-step--process {
          /deep/.van-icon::before {
            border-radius: 50%;
            color: #417adc;
            background-color: #417adc;
          }
        }
        .van-step {
          /deep/.van-icon::before {
            border: 2px;
            border-radius: 50%;
            color: #417adc;
            background-color: #fff;
          }
          p {
            margin-bottom: 4px;
            color: #ababab;
          }
          p:nth-child(1) {
            display: flex;
            justify-content: space-between;
            //width: px2vw(300);
            color: #333;
          }
          .opinion {
            display: flex;
            span:nth-child(1) {
              min-width: 70px;
            }
          }
        }
      }}
  }
  .mainHeight{
    height: calc(100vh - #{px2vh(420)});
  }
  footer {
    height: px2vh(155);
    background: #f2f6fa;
    padding-top: px2vh(45);
    /deep/ .van-button {
      width: calc(100% - #{px2vw(60)});
      margin-left: px2vh(30);
      height: px2vh(120);
      color: #fff;
      background-color: #417ADC;
      border: 1px solid #417ADC;
      border-radius: px2vh(60);
    }
  }

}
</style>
